

<template>
  <div class="page">
    <div class="personal">
        <div class="left">
          <a-image
              :width="68"
              v-if="!workerInfo.profilePicture && workerInfo.sex == 0"
              :src="boy"
          />
          <a-image
              :width="68"
              v-else-if="!workerInfo.profilePicture && workerInfo.sex == 1"
              :src="girl"
          />
          <a-image
              :width="68"
              v-else
              style="border-radius: 50%"
              :src=" proxy.PicPrefixUrl + workerInfo.profilePicture"
          />
          <div class="info">
            <span class="name">{{ workerInfo.realName }}，{{  welcome }}
              <span class="subMore" @click="userMore">更多</span>
            </span>
            <span class="twins">{{twinsVal}}</span>
            <span v-if="workerInfo.post && workerInfo.dept" class="dept">{{ workerInfo.dept.name }} - {{ workerInfo.post.name }}</span>
          </div>
        </div>
        <div class="carouselOne">
          <a-statistic title="今日新用户" :value="statisticsVal.newToday">
            <template #suffix>
              <UserOutlined />
            </template>
          </a-statistic>
          <a-divider type="vertical" />
          <a-statistic title="维修待分配" :value="statisticsVal.waitAssign">
            <template #suffix>
              <ApartmentOutlined />
            </template>
          </a-statistic>
          <a-divider type="vertical" />
          <a-statistic title="未读信息" :value="statisticsVal.readCount">
            <template #suffix>
              <AliwangwangOutlined  />
            </template>
          </a-statistic>
        </div>
    </div>
    <a-row class="content">
      <a-col :span="16">

      </a-col>
      <a-col :span="8" class="right">
        <div class="slackOff">
          <span class="title">每日放松音乐推荐</span>
          <a-divider />
          <div class="music-player">
            <img :src="music.picUrl" alt="Music Cover" class="music-cover">
            <div class="music-info">
              <h2>{{ music.name }}</h2>
              <p> {{ music.auther }}</p>
              <audio :src="music.url" controls style="width: 120px"/>
            </div>
            <div class="controls">
              <a-button type="link" @click="hotSearchMusic">随机</a-button>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>

  </div>
</template>

<script setup lang="ts">

    import boy from "@/assets/img/boy.png";
    import girl from "@/assets/img/girl.png";
    import useHome from "@/hooks/useHome";
    import { getCurrentInstance } from "vue";

    import { UserOutlined , ApartmentOutlined  , AliwangwangOutlined , RadarChartOutlined } from '@ant-design/icons-vue';

    const { workerInfo , welcome , twinsVal , statisticsVal , userMore ,  music , hotSearchMusic } = useHome();
    const { proxy } = getCurrentInstance() as any;

</script>

<style scoped lang="scss">
      .music-player {
        display: flex;
        align-items: center;
      }
      .music-cover {
        width: 120px;
        height: 120px;
        border-radius: 12px;
      }
      audio {
        background-color: transparent !important;
      }
      .music-info {
        margin-left: 10px;
      }
      .controls {
        margin-left: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      input[type="range"] {
        width: 100%;
        margin: 10px 0;
      }
     .carouselOne {
        display: flex !important;
        gap: 12px;
      }
    .page {
      .content {
        margin-top: 22px;
        .right {
          display: flex;
          flex-direction: column;
        }
        .title {
          font-size: 16px;
          font-weight: 800;
        }
        .slackOff {
          background-color: #FFFFFF;
          width: 100%;
          border-radius: 8px;
          //box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
          box-shadow: 0 1px 4px rgba(0,21,41,.1) !important;
          padding: 22px;
        }
      }
      .personal {
        display: flex;
        justify-content: space-between;
        padding: 18px 12px;
        align-items: center;
        border-radius: 8px;
        //background-color: #FFFFFF;
        //box-shadow: 0 1px 4px rgba(0,21,41,.1) !important;
        .left {
          font-size: 12px;
          display: flex;
          align-items: center;
          .info {
            margin-left: 12px;
            display: flex;
            gap: 6px;
            flex-direction: column;
            .name {
              font-size: 20px;
              .subMore {
                font-size: 12px;
                cursor: pointer;
                margin-left: 2px;
                color: #1677ff;
              }
            }
            .twins {
              font-size: 14px;
              opacity: 0.8;
            }
            .dept {
              opacity: 0.7;
            }
          }
        }
      }
    }
</style>
